<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>校园跑腿</title>
    <meta name="description" content="校园跑腿"/>
    <meta name="keywords" content="校园跑腿"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/js/application.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <style>
        .am-slides {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 300px;
            position: relative;
        }

        .am-slides li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .am-slides li.active {
            opacity: 1;
        }

        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #fff;
            background-color: #000;
            padding: 5px 10px;
            text-decoration: none;
            opacity: 0.5;
            transition: opacity 0.3s ease-in-out;
        }

        .slider-nav:hover {
            opacity: 1;
        }

        #prev {
            left: 10px;
        }

        #next {
            right: 10px;
        }
    </style>
</head>

<body>

<div style="margin-left: 30%; margin-right: 30%; width: 40%; height: 300px; display: inline-block; position: relative; overflow: hidden;">
    <ul id="slider" class="am-slides">
<!--        广告/通知  ////列表-->
<!--        th:text = "${adv}"-->
        <li><a href="#"><img style="height: 300px; width: 100%" src="/img/banner1.jpg"></a></li>
<!--        th:text = "${adv}"-->
        <li><a href="#"><img style="height: 300px; width: 100%" src="/img/banner4.jpg"></a></li>
<!--        th:text = "${adv}"-->
        <li><a href="#"><img style="height: 300px; width: 100%" src="/img/banner2.jpg"></a></li>
    </ul>
    <a id="prev" href="#" class="slider-nav"><i class="am-icon-arrow-left"></i></a>
    <a id="next" href="#" class="slider-nav"><i class="am-icon-arrow-right"></i></a>
</div>




<ul style="margin-top: 100px" class="nav">

    <li>
        <a href="/order/add_order?type_demand=取快递">
            <img src="/img/icon.jpg"/>
            <p>取快递</p>
        </a>
    </li>

    <li>
        <a href="/order/add_order?type_demand=求带饭">
            <img src="/img/icon1.jpg"/>
            <p>求带饭</p>
        </a>
    </li>

    <li>
        <a href="/order/add_order?type_demand=求帮忙">
            <img src="/img/icon2.jpg"/>
            <p>求帮忙</p>
        </a>
    </li>

    <li>
        <a href="/order/add_order?type_demand=求陪跑">
            <img src="/img/icon3.jpg"/>
            <p>求陪跑</p>
        </a>
    </li>

</ul>

<div class="h50"></div>

<div style="height: 75px" data-am-widget="navbar" class="am-navbar am-cf am-navbar-default footer  am-no-layout" id="tab">
    <ul class="am-navbar-nav am-cf am-avg-sm-4">
        <li>
            <a href="/user/homepage" class="">
                <span class=""><img style="height: 55px; width: 50px" src="/img/navs.png"></span>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li>
            <a href="/user/run_pool" class="">
                <span class=""><img style="height: 55px; width: 50px" src="/img/nav1.png"></span>
                <span class="am-navbar-label">跑腿池</span>
            </a>
        </li>
        <li>
            <a href="/user/evaluate" class="">
                <span class=""><img style="height: 55px; width: 50px" src="/img/nav2.png"></span>
                <span class="am-navbar-label">评价</span>
            </a>
        </li>
        <li>
            <a href="/user/mypage" class="">
                <span class=""><img style="height: 55px; width: 50px" src="/img/nav3.png"></span>
                <span class="am-navbar-label">我的</span>
            </a>
        </li>

    </ul></div>

</body>
<script>
    // 获取相关元素
    var slider = document.getElementById('slider');
    var prevBtn = document.getElementById('prev');
    var nextBtn = document.getElementById('next');

    // 初始化索引
    var currentIndex = 0;

    // 显示当前索引的幻灯片
    function showSlide(index) {
        var slides = slider.getElementsByTagName('li');

        // 移除之前的活动状态
        for (var i = 0; i < slides.length; i++) {
            slides[i].classList.remove('active');
        }

        // 添加活动状态到当前幻灯片
        slides[index].classList.add('active');
    }

    // 上一张幻灯片按钮点击事件
    prevBtn.addEventListener('click', function (event) {
        event.preventDefault();

        currentIndex--;

        if (currentIndex < 0) {
            currentIndex = slider.getElementsByTagName('li').length - 1;
        }

        showSlide(currentIndex);
    });

    // 下一张幻灯片按钮点击事件
    nextBtn.addEventListener('click', function (event) {
        event.preventDefault();

        currentIndex++;

        if (currentIndex >= slider.getElementsByTagName('li').length) {
            currentIndex = 0;
        }

        showSlide(currentIndex);
    });

    // 初始化显示第一张幻灯片
    showSlide(currentIndex);
    // 自动切换幻灯片
    setInterval(function() {
        currentIndex++;

        if (currentIndex >= slider.getElementsByTagName('li').length) {
            currentIndex = 0;
        }

        showSlide(currentIndex);
    }, 3000);
</script>
</html>
